<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./ajax.js"></script>
  </head>

  <body>
    <div id="box"></div>
    <button id="btnGet">发送GET请求</button>
    <button id="btnForm">发送表单数据</button>
    <button id="btnJson">发送JSON数据</button>
    <button id="btn1">发送异常请求1</button>
    <button id="btn2">发送异常请求2</button>

    <script>
      /* 使用框架发起GET请求 */
      btnGet.onclick = function () {
        ajax({
          // method: "GET",
          url: "http://httpbin.org/get",
          data: { username: "heige", password: "123456" },

          // 成功的时候 将数据显示在box身上
          onSuccess: (data) => (box.innerText = `data=${data}`),

          // 失败的时候 将错误信息显示在box身上
          onFail: (err) => (box.innerText = `err=${JSON.stringify(err)}`),
        });
      };

      /* 使用框架发起POST请求 提交表单 */
      btnForm.onclick = function () {
        ajax({
          // 想携带请求体方法一定得是POST/PUT/PATCH
          method: "POST",

          // 要请求的地址
          url: "http://httpbin.org/post",

          // 声明携带的请求体是表单类型
          dataType: "form", //form/json/undefined

          // 请求体要携带的数据 username=admin&password=123456
          data: { username: "admin", password: "123456" },

          /* 成功失败回调 */
          onSuccess: (data) => (box.innerText = `data=${JSON.stringify(data)}`),
          onFail: (err) => (box.innerText = `err=${JSON.stringify(err)}`),
        });
      };

      /* 使用框架发起POST请求 携带JSON数据 */
      btnJson.onclick = function () {
        ajax({
          method: "PUT",
          url: "http://www.httpbin.org/post",
          // 只要POST请求 则请求体默认JSON
          // dataType: "json",
          data: { username: "admin", password: "123456" },
          onSuccess: (data) => (box.innerText = `data=${JSON.stringify(data)}`),
          onFail: (err) => (box.innerText = `err=${JSON.stringify(err)}`),
        });
      };

      /* 不处理错误 */
      btn1.onclick = function () {
        // 这段代码可能给我返回数据 也可能对我丢炸弹（throw Error）
        ajax({
          // method: "POST",
          // url: "http://httpbin.org/get",
          // dataType: "json",
          // data: { username: "admin", password: "123456" },
          // onSuccess: (data) => box.innerText = `data=${JSON.stringify(data)}`,
          // onFail: err => box.innerText = `err=${JSON.stringify(err)}`
        });

        console.log(
          "执行到此处可以到前台领取女朋友一个+现金100万+月薪30K offer一个"
        );
      };

      /* 调用的框架可能抛出错误，捕获并处理之 */
      btn2.onclick = function () {
        /* 抱着试试看的心理执行一段高危代码 */
        try {
          // 这段代码可能给我返回数据 也可能对我丢炸弹（throw Error）
          ajax({
            // method: "POST",
            // url: "http://httpbin.org/get",
            // dataType: "json",
            // data: { username: "admin", password: "123456" },
            // onSuccess: (data) => box.innerText = `data=${JSON.stringify(data)}`,
            // onFail: err => box.innerText = `err=${JSON.stringify(err)}`
          });
        } 
        
        // 如果高危代码段中出现了怪物（throw Error）
        catch (err) {
          // 捕获到这个怪物 并给与纳粹般的待遇
          console.error("纳粹般对待", err);
        }

        /* 如果怪兽不能把你弄死 就能继续愉快地玩耍 */
        console.log(
          "执行到此处可以到前台领取女朋友一个+现金100万+月薪30K offer一个"
        );

      };
    </script>
  </body>
</html>
